import { currSelf } from '../store'
import { useRecoilValue } from 'recoil'
import styles from './index.module.scss'
import Pagination from '@c/pagination'
import cm from 'classnames'
import { useEffect, useState } from 'react'
import Link from 'next/link'

const Index = props => {
  const { onBack } = props
  const channel = useRecoilValue(currSelf)
  const [page, setPage] = useState(0)
  const [sources, setSources] = useState([])

  useEffect(() => {
    const arr = channel?.source || []
    setSources(arr.slice(page * 10, page * 10 + 10))
  }, [page])

  useEffect(() => {
    window.scrollTo(0, 0)
  }, [])
  return (
    <div className={styles.buildMain}>
      <div className={styles.backImport} onClick={onBack}>
        <img loading="lazy" src="/images/arrow.png" alt="返回" />
        <span>{channel.name}</span>
      </div>
      {sources.map((item, index) => {
        return (
          <Link href={`/zj/${channel.id}/${index + 1}`} className={styles.channelItem} key={index}>
            <div className={styles.img}>
              <img loading="lazy" src="/images/h-curr-play.png" alt="播放" />
              <span className="textEllipsis">{item.name}</span>
            </div>
            <p className={cm(styles.channelName, 'textEllipsis')}>{item.name}</p>
          </Link>
        )
      })}
      <Pagination total={channel.source?.length} top={20} onChange={page => setPage(page - 1)} />
    </div>
  )
}

export default Index
